<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 内容 -->
    <section class="user_balance_box">
      <p class="Order_list_title pad dip ju_al_bet">
        <span class="Order_adm_date">订单编号：{{listOrder.orderCode}}</span>
        <span class="Order_adm_state" v-if="listOrder.orderStatus == '已支付'">{{listOrder.orderStatus}}</span>
        <span class="Order_adm_state Order_adm_stateCor" v-else-if="listOrder.orderStatus == '待支付'">{{listOrder.orderStatus}}</span>
        <span class="Order_adm_state Order_adm_stateCor" v-else>{{listOrder.orderStatus}}</span>
      </p>
      <div class="Order_list_addt dipW pad">
        <section class="Order_list_addtName dip ju_al_lf">
          <span class="Order_list_addtNamef"><i>姓名:</i>{{userAddress.contacts}}</span>
          <span class="Order_list_addtNamef" style="font-family: Arial, Helvetica,sans-serif;"><i>手机号:</i>{{userAddress.contactsPhone}}</span>
        </section>
        <section class="Order_Comm_title dip ju_al_lf order_Comm_titlBOx">
          <img src="../../../static/images/userifon/USer_addtr_03.png" alt="" class="Order_Comm_addrIMg">     
          <p class="Order_Comm_addrText">{{userAddress.address}}</p>
        </section>
      </div>
      <div class="pad OrderCOMMBOX clearfix">
        <div class="Order_list_con dip ju_al_lf">
          <span class="Order_list_ifonImg">
            <img :src="listd.commodityPicture.path" alt="">
          </span>
          <section class="Order_Comm_title dip ju_al_bet">
            <p class="Order_Comm_text dipW ju_al_lf">
              <span class="user_con_ifontitleTop">{{listd.comodity.commodityName}}</span>
              <span class="user_con_ifontitlebom" style="font-family: Arial, Helvetica,sans-serif;">¥{{listd.comodity.marketPrice}}</span>
            </p>
            <!-- <span class="Order_comm_end">x{{listd.text}}</span> -->
            <span class="Order_comm_end" style="font-family: Arial, Helvetica,sans-serif;">×&nbsp;1</span>
          </section>
        </div>
        <p class="Order_list_title dip ju_al_bet">
          <span class="Order_adm_date">支付方式</span>
          <span class="Order_adm_state" v-if="listOrder.paymentMode != null || listOrder.paymentMode != undefined">{{listOrder.paymentMode}}</span>
          <span class="Order_adm_state" v-else-if="listOrder.orderStatus == '待支付'">该订单未支付</span>          
          <span class="Order_adm_state" v-else>该订单已取消</span>
        </p>
        <p class="Order_list_title dip ju_al_bet">
          <span class="Order_adm_date">配送方式</span>
          <span class="Order_adm_state" v-if="listOrder.deliveryMethod != null || listOrder.deliveryMethod != undefined">{{listOrder.deliveryMethod}}</span>
          <span class="Order_adm_state" v-else>物流配送</span>
          
        </p>
        <p class="Order_list_title dip ju_al_bet" v-if="listOrder.orderStatus != '待支付'">
          <span class="Order_adm_date">运费</span>
          <!-- <span class="Order_adm_state">{{listd.text}}</span> -->
          <!-- <span class="Order_adm_state">0元</span> -->
          <span class="Order_adm_state">无</span>
        </p>
      </div>
      <p class="Order_list_title dip ju_al_bet pad OrderCOMMBOX">
        <span class="Order_adm_date">交易时间</span>
        <span class="Order_adm_state" style="font-family: Arial, Helvetica,sans-serif;">{{userAddress.createDate}}</span>
      </p>
      <div class="money_balance clearfix"  v-if="listOrder.orderStatus == '待支付'">
        <div class="money_balance_mode dip ju_al_lf">支付方式:</div>
        <div class="money_balance_padfr" >
          <div class="money_balance_box money_balance_padfrf dip ju_al_bet" v-for="(itemsf,index) in  moneybalance" :key="index" @click="addactiveIMG(index,moneybalance)" v-if="itemsf.ifblock">
            <span class="money_logoIMg" >
              <img :src="'./static/images/Order/'+itemsf.logoUrl+''" alt="">
            </span>
            <span class="money_txet dip ju_al_lf">
              <i>{{itemsf.text}}</i>
              <i class="money_txet_child" v-if="itemsf.block">（可用余额：<em>￥{{money}}</em>）</i>
            </span>
            <span class="money_activeIMg">
              <img :src="'./static/images/Order/'+itemsf.activeIMg+''" alt="" v-if="itemsf.ind">
              <img :src="'./static/images/Order/'+itemsf.activeIMgnone+''" alt="" v-else>
            </span>
          </div>
        </div>
      </div>
      <footer class="payment_mode dip" v-if="listOrder.orderStatus == '待支付'">
        <button class="mall_ToPay ToPay——bg" @click="addWechet(1)">取消订单</button>     
        <button class="mall_ToPay Asyougo_bg" @click="getPostNeg()">立即支付</button>
      </footer>
    </section>
    <!-- 余额弹出框 -->
		<div class="orderDetilserror" v-if="this.yueblock">
			<div class="dipW ju_al orderDetilserror_child">
				<span class="ODS_fiast dipW ju_al">
					<em>您的账户余额不足</em>
					<em>是否需要充值?</em>
				</span>
				<span class="dip ju_al ODS_last bg_li">
					<em class="ODS_em1" @click="wechetRechargefgh()">取消</em>
					<em class="ODS_em2" @click="AddwechetRecharge()">立即充值</em>
				</span>
			</div>
		</div>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'

export default {
  data(){
    return{
      urls:{
        url:'/bomNav/orderAdm',
        // url:'',
        text:'订单详情',
      },
      listd:'', //订单内容
      listOrder:'', //订单信息
      userAddress:'',//个人信息
      money:'',
      OPenID:'',
      Negactive:false,
      yueblock:false,
      indexmoneytype:'',
      moneybalance:[
        {
          logoUrl:'Order_yue.png',
          text:'余额支付',
          ind:true, //变换背景
          block:true, //显示额
          ifblock:true, //这是显示微信点击的事件,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
          moneybalanceS:'balancePayment'
        }
        ,{
          logoUrl:'Order_wechet.png',
          text:'微信支付',
          ind:false,
          block:false,
          ifblock:true,
          activeIMg:'Order_moyactive.png',
          activeIMgnone:'ORder_cool.png',
          moneybalanceS:'WeChatPayment'
        }
      ],
      
    }
  }
  ,methods:{
    getCOMMadm(){
      //login
      var t;
      clearTimeout(t)
      this.OPenID = sessionStorage.getItem('openId')
      for(var i = 0;i<this.moneybalance.length;i++){
        if(this.moneybalance[i].ind == true){
          this.indexmoneytype = this.moneybalance[i].moneybalanceS
        }
      }
      this.listd = JSON.parse(sessionStorage.getItem('orderAdmCOMM'))
      if(this.listd != ''){
         //结束 longding
        // console.log(this.listd)   
        this.listOrder = this.listd.order
        this.userAddress = this.listd.userAddress
      }else{
        t = setTimeout(()=>{
          alert('订单详情获取失败')
        },4000)
      }
    },
    moneyUserADMdailate(){
      this.axios.post(this.$busPoat.userInfo(),{}).then(response=>{
        this.money = response.data.user.availableAmount
        sessionStorage.setItem('balance',JSON.stringify(response.data))        
        // console.log(JSON.parse(sessionStorage.getItem('balance')))       
      }).catch(error=>{
        alert('获取用户信息失败')
        console.log(error)
      })
    },
    addactiveIMG(index,typr){
      if(typr.length >=2){
        for(var i = 0;i<typr.length;i++){
          typr[i].ind = false;
        }
        typr[index].ind = true;
          this.indexmoneytype = typr[index].moneybalanceS  
      }
    },
    onBridgeReady(resf){
			var _this = this
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',{
					"appId":resf.data.unifiedOrd.appId,     //公众号名称，由商户传入     
					"timeStamp":resf.data.unifiedOrd.timeStamp,     ////       //时间戳，自1970年以来的秒数    
					"nonceStr":resf.data.unifiedOrd.nonceStr, //随机串     
					"package":resf.data.unifiedOrd.package,     
					"signType":"MD5",      ///    //微信签名方式：     
					"paySign":resf.data.unifiedOrd.sign //微信签名 
				},
				// console.log(gf)
				function(res){     
					if(res.err_msg == "get_brand_wcpay_request:ok" ) {
            _this.$router.push({
              path:'/bomNav/OrderDetails/orderseccess'
            })
					} // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
				}
			); 
		},
    getPostNeg(){  //显示（判断）
      let OrderIfon = {
        "deliveryMethod":'物流配送',
        "deliveryTime": this.listd.order.deliveryTime,
        "paymentMode":this.indexmoneytype,
        "orderId":this.listd.order.id,
        "orderAmount":this.listd.order.orderAmount,
        "orderCode":this.listd.order.orderCode,
        "openid":this.OPenID,
        "description":this.listd.comodity.description, //商品描述
        "commodityId":this.listd.comodity.id, //商品ID
      }
      //console.log(OrderIfon)      
      if(this.indexmoneytype == 'balancePayment'){
        // console.log(this.userPurchaseorder.data.accountBalance < this.userPurchaseorder.data.orderAmount)
        // if(this.userPurchaseorder.data.accountBalance > this.userPurchaseorder.data.orderAmount){  //这是大于
        if(this.money  < this.listd.order.orderAmount){  //这是小于
          this.yueblock = true;
        }else{
          this.$store.dispatch('showloader')
          console.log(3)
          this.yueblock = false;
          this.axios.post(this.$busPoat.payment(),OrderIfon).then(resf =>{
            var st;
            clearTimeout(st)
            st = setTimeout(() =>{
              if(resf != null || resf != undefined){
                this.$store.dispatch('hideloader')  
                  console.log(resf.data)
                  if(resf.data.iplancode == 200){
                    //跳到成功页
                    this.$router.push({
                      path:'/bomNav/OrderDetails/orderseccess'
                    })
                    //logoding 结束
                  }else if(resf.data.iplancode == 106){
                    alert(resf.data.msg)
                    //提示用户
                  }else if(resf.data.iplancode == 101){
                    alert(resf.data.msg)
                    //跳到未支付页
                    //logoding 结束
                  }else if(resf.data.iplancode == 104){
                    alert(resf.data.msg)
                    //提示用户
                  }else if(resf.data.iplancode == 105){
                    alert(resf.data.msg)
                    //提示用户
                  }
             }else{
              this.$store.dispatch('hideloader')
              alert('请求加载过慢...')
            }
            clearTimeout(st)                                                                       
          },2000)
          }).catch(error=>{
            this.$store.dispatch('hideloader')            
            alert('支付失败')
          })
        }
      }else if(this.indexmoneytype == 'WeChatPayment'){ //这是微信支付
        this.axios.post(this.$busPoat.payment(),OrderIfon).then(resf =>{
            if(resf.data.iplancode == 200){
              if(typeof WeixinJSBridge == "undefined"){
                if(document.addEventListener){
                  document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
                }else if (document.attachEvent){
                  document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
                  document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
                }
              }else{
                this.onBridgeReady(resf);
              }
            }else if(resf.data.iplancode == 106){
              alert(resf.data.msg)
              //提示用户
            }else if(resf.data.iplancode == 101){
              alert(resf.data.msg)
              //跳到未支付页
              //logoding 结束
            }else if(resf.data.iplancode == 104){
              alert(resf.data.msg)
              //提示用户
            }else if(resf.data.iplancode == 102){
              alert(resf.data.msg)
              //提示用户
            }
        }).catch(error=>{
          alert('支付失败')
        })
      }
    },


    wechetRechargefgh(){
			this.yueblock = false;
		},
		AddwechetRecharge(){
			var _this = this
			var t;
			// clearTimeout(t)	
			this.$router.push({
				path:'/bomNav/userRecharge/1'//要去的路由充值
			})
			// alert('刚充值成功')
			// t = setTimeout(function(){
				_this.yueblock = false;	
			// },1000)
    },
    addWechet(type){
      this.$store.dispatch('showloader')
			var _this = this
			this.axios.post(this.$busPoat.cancelS(),{
				"orderId":this.listd.order.id
			}).then(res =>{
         var st;
          clearTimeout(st)
          st = setTimeout(() =>{
            if(res != null || res != undefined){
              this.$store.dispatch('hideloader')       
                if(res.data.iplancode == 101){
                  // alert('亲,您的'+res.data.msg+'!!!')
                // _this.$router.push({path:''+this.urls.url+''})
                this.$router.back()
                }else if(res.data.iplancode == 102){
                  alert('亲，你的订单已全部支付，'+res.data.msg+'哦！')
                }else if(res.data.iplancode == 103){
                  alert('亲，您的订单中'+res.data.msg+'!')
                }
            }else{
              this.$store.dispatch('hideloader')
              alert('请求加载过慢...')
            }
            clearTimeout(st)                                                                       
          },2000)
			}).catch(error=>{
        this.$store.dispatch('hideloader')        
				alert('订单取消失败')
			})
    },
    

  },
  components:{Nav} //引入组件
  ,created(){
    this.getCOMMadm()
    this.moneyUserADMdailate()
  }
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  position: fixed;
}
.user_balance_box{
  margin-top:.9rem;
  width: 100%;
  height: 100%;
  color:#666;
  font-weight: 600;
}
.pad{
  padding:0rem .4rem;
  background: #fff;
}
.Order_list_title{
  width: 100%;
  height: 0.86rem;
  border-bottom:.02rem solid #f2f2f2;
  .Order_adm_date{
    font-size: .24rem;
    color:#aaa;
  }
  .Order_adm_state{
    font-size: .26rem;
  }
}
.Order_list_addt{
  padding:.3rem .4rem .4rem;
  height: 2.04rem;
  .Order_list_addtName{
    width: 100%;
    font-size: .24rem;
    .Order_list_addtNamef{
      width: 50%;
      i{
        color:#999;
        margin-right:.3rem;
      }
    }
  }
  .order_Comm_titlBOx{
    margin-top:.4rem;
  }
  .Order_Comm_addrIMg{
    width: 0.4rem;
    height: 0.4rem;
  }
  .Order_Comm_addrText{
    margin-left:.4rem;
  }
}
.OrderCOMMBOX{
  margin-top:.1rem;
  width: 100%;  
}
.Order_list_con{
  width: 100%;
  // height: 1.8rem;
  padding:.3rem 0rem .26rem;
  border-bottom:.02rem solid #f2f2f2;
  .Order_list_ifonImg{
    height: 1.4rem;
    max-width: 1.4rem;
    width: 22.84%;
    margin-right:4.5%;
    background: #000;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .Order_Comm_title{
    height: 1.24rem;
    width: 81.49%;
    .Order_Comm_text{
      // padding:.2rem 0rem;
      height: 100%;
      max-width: 4.84rem;
      width: 93%;
      font-size: .24rem;      
      .user_con_ifontitleTop{
        width: 100%;
                 -webkit-align-self:flex-start;

              -ms-flex-item-align:start;

                  align-self:flex-start;
      }
      .user_con_ifontitlebom{
        width: 100%;        
        color:#FF7200; 
          -webkit-align-self:flex-end;
              -ms-flex-item-align:end;
                  align-self:flex-end;
      }
    }
    .Order_comm_end{
      font-size: .26rem;
      color:#999;
         -webkit-align-self:flex-end;
              -ms-flex-item-align:end;
                  align-self:flex-end;
      width: 7%;                          
    }
  }
}
.money_balance{
  width: 100%;
  background: #fff;
  // height: 2.05rem;
  .money_balance_mode{
    padding:.2rem .4rem;
    border-top:.1rem solid #f2f2f2;
    border-bottom:.02rem solid #f2f2f2;
    font-size: .24rem;
    color:#333;
    font-weight: 600;
  }
  .money_balance_padfr{
    padding:0rem .4rem;
    width: 100%;
    height: 2rem;
  }
  .money_balance_box{
    height: 49.8%;
    border-bottom:.02rem solid #f2f2f2;
    position: relative;
    // .posi_abs{
    //   height: 100%;
    //   width: 100%;
    //   position: absolute;
    //   top:0;
    //   left:0;
    //   background: rgba(255,255,255,.01);
    //   z-index: 2;
    // }
    img{
      width: 100%;
      height: 100%;
    }
    .money_logoIMg{
     width: 8%;
      height: 43%;
      margin-left:6%;
    }
    .money_txet{
      font-size: .28rem;
      color:#666;
      width: 81%;
      height: 52%;
      font-weight: 600;
      padding-left:.4rem;
      .text_acirve{
        color:#C6C6C6;
      }
      .money_txet_child{
        font-size: .24rem;
        color:#666666;
        em{
          color:#FF7200;
        }
      }
    }
    .money_activeIMg{
      width: 8%;
      height: 43%;
      margin-right:6%;
    }
  }
  .money_balance_padfrf{
    &:last-child{
      border-bottom:0;
    }
  }
  .posi_block_wechetnone{
    position: relative;
    width: 100%;
    height: 1.06rem;
    background: #f2f2f2;
    text-align: center;
    line-height: 1.06rem;
    font-size: .2rem;
    color:#FF7200;
    font-weight: 600;
  }
}
.payment_mode{
  width: 100%;
  height: 0.98rem;
  background: #fff;
  justify-content:space-around;
  align-items: center;
  position: fixed;
  bottom:0;
  z-index: 51;
  .mall_ToPay{
    width: 50%;
    // position: relative;
    font-size:.3rem;
    height: 100%;
    line-height: 0.98rem;
    text-align: center;
    color:#fff; 
  }
  .ToPay——bg{
    background: #ABABAB ;
  }
  .ToPay——bg::before,.Asyougo_bg::after{
    content:"";
    width:0;
    height:0;
    position:absolute;
  }
  // .ToPay——bg::before{
  //   left:35.5%;
  //   top:0%;
  //   border:solid .98rem transparent;
  //   border-right:solid .26rem #FF7200;       /* 黑色大三角形 */
  //   border-top:solid .98rem transparent;
  // }
  .Asyougo_bg::after{
    left:50%;
    top:0%;
    border-top:solid 0rem transparent;
    border-left:solid .26rem #ABABAB;       /* 黑色大三角形 */
    border-bottom:solid .98rem transparent
  }
  .Asyougo_bg{
    background: #FF7200;
  }
}
.orderDetilserror{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: rgba(0,0,0,.4);
  z-index: 60;
  .orderDetilserror_child{
		border:0;
    width: 70%;
    // height: 22%;
    background: rgba(255,255,255,1);
    position: relative;
    top:50%;
    left:50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		-moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
    span{
			width: 100%;
      font-size: .28rem;
      color:#666666;
			text-align: center;
			font-family: 'MicrosoftYaHei';
    }
    .ODS_fiast{
      height: 1.8rem;
      padding:9% 25%;
			// line-height: .4rem;
			font-weight: 600;
    }
    .ODS_last{
      // background-image: url('../../../static/images/Order/order_yue_img.png');
      // background-repeat: no-repeat;
      // background-size: 100%;
			// height: .8rem;
      border:0;
      padding:5% 0rem;
      em{
        width: 50%;
        height: 100%;
				font-weight: 600;
				color:#FFFFFF;
				// background: #ff6f00;
        // line-height: .8rem;
      }
      .ODS_em2{
				border-left:.02rem solid #FF7200;
      }
    }
  }
}
</style>
